﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>恒爱科技--后台运营系统</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<link rel="icon" type="image/x-icon" href="images/favicon.ico">
		<link rel="stylesheet" href="../../plugins/layui/css/layui.css" media="all" />
	</head>

	<body class="layui-layout-body">
		<div class="layui-layout layui-layout-admin">
			
			<#include "/public/header.html"/>
			<div class="layui-side layui-bg-black" id="admin-side">
				<div class="layui-side-scroll" id="admin-navbar-side">
					<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
					<ul class="layui-nav layui-nav-tree" lay-filter="demo">
						<li class="layui-nav-item layui-nav-itemed">
							<a class="" href="javascript:;">所有商品</a>
							<dl class="layui-nav-child">
								<dd>
									<a class="site-demo-active" data-type="tabAdd" href="javascript:;">列表一</a>
								</dd>
								<dd>
									<a href="javascript:;">列表二</a>
								</dd>
								<dd>
									<a href="javascript:;">列表三</a>
								</dd>
								<dd>
									<a href="">超链接</a>
								</dd>
							</dl>
						</li>
						<li class="layui-nav-item">
							<a href="javascript:;">解决方案</a>
							<dl class="layui-nav-child">
								<dd>
									<a href="javascript:;">列表一</a>
								</dd>
								<dd>
									<a href="javascript:;">列表二</a>
								</dd>
								<dd>
									<a href="">超链接</a>
								</dd>
							</dl>
						</li>
						<li class="layui-nav-item">
							<a href="">云市场</a>
						</li>
						<li class="layui-nav-item">
							<a href="">发布商品</a>
						</li>
					</ul>
				</div>
			</div>

			<div class="layui-body" style="bottom: 0; border-left: solid 2px #1AA094;" id="admin-body">
				<div class="layui-tab admin-nav-card layui-tab-brief" lay-filter="admin-tab" lay-allowclose="true">
					<ul class="layui-tab-title">
						<li class="layui-this"><i class="fa fa-dashboard" aria-hidden="true"></i> <cite>今日统计</cite></li>
					</ul>

					<div class="layui-tab-content" style="min-height: 150px; padding: 5px 0 0 0;">
						<div class="layui-tab-item layui-show" style="width: 100%; height: 500px;" id="mainCharts"></div>
					</div>

				</div>
			</div>

			<#include "/public/footer.html"/>
		</div>
		<script type="text/javascript" src="../../plugins/layui/layui.js"></script>
		<script type="text/javascript" src="../../plugins/echarts/echarts.js"></script>

		<script>
			layui.use('element', function() {
				var $ = layui.jquery,
					element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

				//触发事件
				var active = {
					tabAdd: function() {
						//新增一个Tab项
						element.tabAdd('admin-tab', {
							title: '新选项' + (Math.random() * 1000 | 0) //用于演示
								,
							content: '内容' + (Math.random() * 1000 | 0),
							id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
						})
					},
					tabDelete: function(othis) {
						//删除指定Tab项
						element.tabDelete('demo', '44'); //删除：“商品管理”

						othis.addClass('layui-btn-disabled');
					},
					tabChange: function() {
						//切换到指定Tab项
						element.tabChange('demo', '22'); //切换到：用户管理
					}
				};

				$('.site-demo-active').on('click', function() {
					var othis = $(this),
						type = othis.data('type');
					active[type] ? active[type].call(this, othis) : '';
				});

			});

			var myChart = echarts.init(document.getElementById('mainCharts'));
			var xAxisData = [];
			var data1 = [];
			var data2 = [];
			for(var i = 0; i < 100; i++) {
				xAxisData.push('类目' + i);
				data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
				data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5);
			}

			option = {
				title: {
					text: '柱状图动画延迟'
				},
				legend: {
					data: ['bar', 'bar2'],
					align: 'left'
				},
				toolbox: {
					// y: 'bottom',
					feature: {
						magicType: {
							type: ['stack', 'tiled']
						},
						dataView: {},
						saveAsImage: {
							pixelRatio: 2
						}
					}
				},
				tooltip: {},
				xAxis: {
					data: xAxisData,
					silent: false,
					splitLine: {
						show: false
					}
				},
				yAxis: {},
				series: [{
					name: 'bar',
					type: 'bar',
					data: data1,
					animationDelay: function(idx) {
						return idx * 10;
					}
				}, {
					name: 'bar2',
					type: 'bar',
					data: data2,
					animationDelay: function(idx) {
						return idx * 10 + 100;
					}
				}],
				animationEasing: 'elasticOut',
				animationDelayUpdate: function(idx) {
					return idx * 5;
				}
			};
			myChart.setOption(option);
		</script>
	</body>

</html>